<template>
  <view class="profile-container">
    <view class="header-section">
      <view class="user-info">
        <image class="avatar" :src="userInfo.avatar || '/static/avatar.png'" mode="aspectFill"></image>
        <view class="user-details">
          <text class="username">{{ userInfo.nickname || userInfo.username }}</text>
          <text class="user-role">{{ getRoleText(userInfo.role) }}</text>
        </view>
      </view>
    </view>
    
    <view class="menu-section">
      <view class="menu-item" @click="goToPage('/pages/profile/edit')">
        <text class="menu-text">编辑资料</text>
        <text class="arrow">></text>
      </view>
      
      <view class="menu-item" @click="goToPage('/pages/profile/settings')">
        <text class="menu-text">设置</text>
        <text class="arrow">></text>
      </view>
      
      <view class="menu-item" @click="goToPage('/pages/profile/notifications')">
        <text class="menu-text">消息通知</text>
        <text class="arrow">></text>
      </view>
      
      <view class="menu-item" @click="goToPage('/pages/chat/index')">
        <text class="menu-text">💬 在线客服</text>
        <text class="arrow">></text>
      </view>
      
      <view class="menu-item" @click="goToPage('/pages/profile/feedback')">
        <text class="menu-text">意见反馈</text>
        <text class="arrow">></text>
      </view>
      
      <view class="menu-item" @click="goToPage('/pages/profile/about')">
        <text class="menu-text">关于我们</text>
        <text class="arrow">></text>
      </view>
      
      <!-- 系统管理入口（仅管理员可见） -->
      <view class="menu-item" v-if="userInfo.role === 'admin'" @click="goToPage('/pages/system/index')">
        <text class="menu-text">系统管理</text>
        <text class="arrow">></text>
      </view>
      
      <!-- 数据统计入口（仅管理员可见） -->
      <view class="menu-item" v-if="userInfo.role === 'admin'" @click="goToPage('/pages/statistics/index')">
        <text class="menu-text">数据统计</text>
        <text class="arrow">></text>
      </view>
    </view>
    
    <view class="logout-section">
      <button class="logout-button" @click="logout">退出登录</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { authApi } from '../../src/services/api'

// 用户信息
const userInfo = ref({
  id: 0,
  username: '',
  nickname: '',
  email: '',
  phone: '',
  avatar: '',
  role: ''
})

// 页面加载时获取用户信息
onMounted(() => {
  fetchUserInfo()
})

// 获取用户信息
const fetchUserInfo = async () => {
  try {
    const response: any = await authApi.getUserInfo()
    userInfo.value = response.data
    // 更新本地存储
    uni.setStorageSync('user', response.data)
  } catch (error) {
    console.error('获取用户信息失败:', error)
    uni.showToast({
      title: '获取用户信息失败',
      icon: 'none'
    })
  }
}

// 获取角色文本
const getRoleText = (role: string) => {
  switch (role) {
    case 'admin': return '管理员'
    case 'coach': return '教练'
    case 'member': return '会员'
    default: return '用户'
  }
}

// 跳转到指定页面
const goToPage = (url: string) => {
  uni.navigateTo({
    url
  })
}

// 退出登录
const logout = async () => {
  try {
    await authApi.logout()
    // 清除本地存储
    uni.removeStorageSync('token')
    uni.removeStorageSync('user')
    // 跳转到登录页面
    uni.reLaunch({
      url: '/pages/auth/login'
    })
  } catch (error) {
    console.error('退出登录失败:', error)
    uni.showToast({
      title: '退出登录失败',
      icon: 'none'
    })
  }
}
</script>

<style lang="scss" scoped>
.profile-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.header-section {
  background: linear-gradient(135deg, #4B0082, #8A2BE2);
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 30rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
}

.user-details {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.username {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
}

.user-role {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
}

.menu-section {
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 30rpx;
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 2rpx solid #f5f5f5;
  
  &:last-child {
    border-bottom: none;
  }
  
  &:active {
    background-color: #f5f5f5;
  }
}

.menu-text {
  font-size: 32rpx;
  color: #333;
}

.arrow {
  font-size: 32rpx;
  color: #999;
}

.logout-section {
  padding: 0 20rpx;
}

.logout-button {
  width: 100%;
  background-color: #f44336;
  color: #fff;
  border: none;
  padding: 30rpx;
  border-radius: 20rpx;
  font-size: 32rpx;
  font-weight: bold;
  
  &:active {
    opacity: 0.8;
  }
}
</style>